<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>中视场彩色相机</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/bbfont.css">
  <link rel="stylesheet" href="/static/css/style.css">
  <link rel="stylesheet" href="qv.css">
  <style>
    #thumbs > div {
      display: inline-block;position: relative;overflow: hidden;
      max-width: 250px;
      max-height: 200px;
    }
    #thumbs > div > img {width: 250px;height: 100%}
    #thumbs > div > b {position: absolute;text-shadow: 1px 1px 1px #FFF}
    #viewer {background: transparent}
    #viewer.M1 > div > .history {display: none}
    #viewer.M2 > div > div:nth-child(n+2) {display: none}
    #viewer.M2 > div > .history {flex-grow: 1}
    #viewer.M3 > div > .history {width: 311px !important;}
  </style>
</head>
<body id="viewer" class="M1">
<div class="d-flex d-flex flex-column vh-100">
  <div id="ctrl" class="d-flex flex-row bg-dark" style="height: 28px">
    <button class="fa fa-download btn btn-dark btn-r" onclick="download()"> 下载</button>
    <label title="对比度" class="btn-r btn btn-dark"><i class="fa fa-adjust"></i>
      <input type="range" value="1" min="0" max="2" step="0.01"></label>
    <label title="亮度" class="btn-r btn btn-dark"><i class="fa fa-sun-o "></i>
      <input type="range" value="1" min="0" max="2" step="0.01"></label>
    <label title="色调" class="btn-r btn btn-dark"><i class="fa fa-dashboard "></i>
      <input type="range" value="0" min="0" max="360"> </label>
    <label title="饱和度" class="btn-r btn btn-dark"><i class="fa fa-certificate "></i>
      <input type="range" value="1" min="0" max="2" step="0.01"> </label>
    <button title="重置" class="btn-r btn btn-dark" onclick="reset()">
      <i class="fa fa-refresh"></i>
      <i class="fa fa-circle-half"></i>
    </button>
  </div>
  <div class="flex-grow-1 d-flex flex-row">
    <div class="ms-1 d-flex flex-column" style="width: 300px">
      <div class="bg-primary text-light" style="height: 28px">
        <label class="btn-r">
          尘埃模块科学数据包 1 </label>
      </div>
      <div class="flex-grow-1  position-relative">
        <div class="position-absolute h-100 w-100" style="overflow-y: auto">
          <table class="table table-bordered table-dark table-sm">
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div id="img-viewer" class="flex-grow-1" style="border-left: 1px solid #049">
      <img src="img/chenai.png">
    </div>
    <div class="ms-1 d-flex flex-column" style="width: 300px">
      <div class="bg-primary text-light" style="height: 28px">
        <label class="btn-r">
          尘埃模块科学数据包 2 </label>
      </div>
      <div class="flex-grow-1  position-relative">
        <div class="position-absolute h-100 w-100" style="overflow-y: auto">
          <table class="table table-bordered table-dark table-sm">
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
            <tr>
              <th>1</th>
              <td>312312.3213</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>

</div>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/xtool.js"></script>
<script src="cam-qv.js"></script>
<script>
  rt_url = () => ''
  img_url = () => ''
  his_url = () => ''
  main = new CamViewer(rt_url, img_url, his_url)
  main.realtime()
</script>
</body>
</html>